<template>
  <div class="container">
    <!-- 加载动画 -->
    <div class="loading-container" v-if="showLoading">
      <div class="loading-bar-container">
        <div class="loading-bar" :style="{ width: loadingProgress + '%' }"></div>
      </div>
      <div class="loading-text">{{ loadingProgress }}%</div>
    </div>


    <!-- 筛选结果统计 -->
    <div class="result-summary">
      <div class="summary-item">
        <div class="summary-value">{{ recommendations.length }}</div>
        <div class="summary-label">匹配人才</div>
      </div>
      <div class="summary-item">
        <div class="summary-value">{{ avgMatch }}%</div>
        <div class="summary-label">平均匹配度</div>
      </div>
    </div>
    
    <!-- 人才列表 -->
    <scroll-view class="result-list" scroll-y="true">
      <div class="result-card" v-for="item in recommendations" :key="item.id" @click="viewDetail(item)">
        <div class="avatar-container">
          <image class="avatar" :src="item.avatar" mode="aspectFill" />
        </div>
        <div class="info-container">
          <div class="name">{{ item.name }}</div>
          <div class="match-container">
            <div class="match-text">匹配度</div>
            <div class="match-value">{{ item.match }}%</div>
          </div>
        </div>
        <div class="match-bar">
          <div class="match-fill" :style="{ width: item.match + '%' }"></div>
        </div>
      </div>
      
      <div v-if="recommendations.length === 0" class="empty-result">
        <image src="/static/empty.png" class="empty-icon" />
        <div class="empty-text">没有找到匹配的人才</div>
        <div class="empty-tip">请尝试调整筛选条件</div>
        <button class="retry-btn" @click="goBack">重新筛选</button>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendations: [],
      showLoading: true, // 控制加载动画的显示
      loadingProgress: 0, // 加载进度
      loadingInterval: null // 定时器
    }
  },
  computed: {
    // 计算平均匹配度
    avgMatch() {
      if (this.recommendations.length === 0) return 0;
      const total = this.recommendations.reduce((sum, item) => sum + parseInt(item.match), 0);
      return Math.round(total / this.recommendations.length);
    }
  },
  onLoad() {
    // 模拟数据加载过程
    this.startLoading();
    
    // 从全局变量获取筛选结果
    const app = getApp();
    this.recommendations = app.globalData.recommendations || [];
    
    // 模拟2秒后加载完成
    setTimeout(() => {
      this.showLoading = false;
    }, 2000);
  },
  methods: {
    // 启动加载动画
    startLoading() {
      this.loadingInterval = setInterval(() => {
        this.loadingProgress += 1;
        if (this.loadingProgress >= 100) {
          clearInterval(this.loadingInterval);
        }
      }, 20); // 每20毫秒增加1%，总耗时2秒（100 * 20ms = 2000ms）
    },
    // 返回上一页
    goBack() {
      uni.navigateTo({
		  url:'/pages/index/business/checkstudent'
	  });
    },
    // 查看人才详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/index/business/detail?id=${item.id}`
      });
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.loadingInterval) {
      clearInterval(this.loadingInterval);
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

/* 加载动画样式 */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保加载层在最上面 */
}

.loading-bar-container {
  width: 80%;
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.loading-bar {
  height: 100%;
  background: linear-gradient(90deg, #0000ff, #00aaff);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.loading-text {
  font-size: 16px;
  color: #4CAF50;
  font-weight: bold;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #333;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.back-btn {
  font-size: 24px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-summary {
  display: flex;
  justify-content: space-around;
  padding: 20px 15px;
  background: linear-gradient(135deg, #0000ff, #00aaff);
  color: white;
  margin-bottom: 10px;
}

.summary-item {
  text-align: center;
}

.summary-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.summary-label {
  font-size: 14px;
  opacity: 0.9;
}

.result-list {
  height: calc(100vh - 180px);
  padding: 10px;
}

.result-card {
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: relative;
}

.avatar-container {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  background: #f0f0f0;
  border: 2px solid #00aaff;
}

.avatar {
  width: 100%;
  height: 100%;
}

.info-container {
  flex: 1;
}

.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.match-container {
  display: flex;
  align-items: center;
}

.match-text {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.match-value {
  font-size: 18px;
  font-weight: bold;
  color: #00aaff;
}

.match-bar {
  position: absolute;
  bottom: 10px;
  left: 90px;
  right: 15px;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.match-fill {
  height: 100%;
  background: #00aaff;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.empty-result {
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  opacity: 0.6;
}

.empty-text {
  font-size: 18px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.empty-tip {
  font-size: 14px;
  color: #999;
  margin-bottom: 25px;
}

.retry-btn {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px 30px;
  font-size: 16px;
  margin-top: 10px;
}
</style>